<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		newsData: Array
	})
</script>

<template>
	<view class="navNews">
		<view class="row">
			<view class="column" v-for="(item, index) in newsData" :key="index" @click="$emit('navItemClick', item)">
				<image :src="item.imagePath"></image>
				<text>{{ item.title }}</text>
				<text>{{ item.simple }}</text>
				<text>{{ item.author }}</text>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.navNews {
		margin-top: 2vh;

		.row {
			display: grid;
			grid-template-columns: repeat(2, 48%);
			gap: 4vw;

			.column {
				padding: 3vw;
				background-color: #ffffff;
				border-radius: 4vw;
				display: flex;
				flex-direction: column;

				image {
					width: 98%;
					height: 12vh;
					border-radius: 2vw;
				}

				text {
					padding: 0 1vw;

					&:nth-child(2) {
						margin-top: 1vh;
					}

					&:nth-child(2) {
						margin: 1vh 0;
					}

					&:not(:nth-child(2)) {
						color: #8a8a8a;
						font-size: 3vw;
					}
				}

			}
		}
	}
</style>